<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影师详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航 -->
    <div class="relative">
        <div class="absolute top-0 left-0 right-0 z-10 p-4 flex justify-between items-center">
            <button class="bg-black bg-opacity-30 text-white p-2 rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <div class="flex space-x-3">
                <button class="bg-black bg-opacity-30 text-white p-2 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                    </svg>
                </button>
                <button class="bg-black bg-opacity-30 text-white p-2 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                    </svg>
                </button>
            </div>
        </div>
        
        <!-- 封面图 -->
        <div class="h-64 overflow-hidden">
            <img src="https://images.unsplash.com/photo-1551316679-9c6ae9dec224?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="w-full object-cover h-full">
        </div>
    </div>

    <!-- 摄影师信息 -->
    <div class="bg-white rounded-t-3xl -mt-6 relative z-10 p-5">
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-xl font-bold">小林摄影</h1>
                <div class="flex items-center mt-1">
                    <div class="text-yellow-500 flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <span class="ml-1 text-sm">4.9</span>
                    </div>
                    <span class="mx-2 text-gray-300">|</span>
                    <span class="text-sm text-gray-500">已完成 256 单</span>
                </div>
            </div>
            <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm">空闲中</div>
        </div>

        <div class="flex mt-4 space-x-2">
            <div class="bg-purple-100 text-purple-600 px-2 py-1 rounded-md text-xs">Cosplay</div>
            <div class="bg-purple-100 text-purple-600 px-2 py-1 rounded-md text-xs">JK制服</div>
            <div class="bg-purple-100 text-purple-600 px-2 py-1 rounded-md text-xs">提供精修</div>
        </div>

        <div class="mt-4 text-sm text-gray-600 leading-relaxed">
            专注二次元人像摄影5年，擅长Cosplay、JK等风格，提供现场拍摄和后期精修服务。漫展现场可提供简易布景和补光设备，让您的角色更加生动。
        </div>

        <div class="mt-4 flex justify-between items-center">
            <div>
                <div class="text-gray-500 text-xs">价格</div>
                <div class="text-red-500 font-bold">¥120起/组</div>
            </div>
            <button class="bg-purple-600 text-white px-6 py-2 rounded-full font-medium">立即预约</button>
        </div>
    </div>

    <!-- 作品展示 -->
    <div class="bg-white mt-3 p-5">
        <h2 class="font-bold text-lg mb-3">作品展示</h2>
        <div class="grid grid-cols-2 gap-2">
            <img src="https://images.unsplash.com/photo-1583195764036-6dc248ac07d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" class="rounded-lg w-full h-40 object-cover">
            <img src="https://images.unsplash.com/photo-1576086213369-97a306d36557?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" class="rounded-lg w-full h-40 object-cover">
            <img src="https://images.unsplash.com/photo-1514052010593-e2fe7a6a9b91?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" class="rounded-lg w-full h-40 object-cover">
            <img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" class="rounded-lg w-full h-40 object-cover">
        </div>
        <button class="w-full mt-3 text-purple-600 border border-purple-600 rounded-lg py-2 text-center">查看更多作品</button>
    </div>

    <!-- 评价 -->
    <div class="bg-white mt-3 p-5 mb-20">
        <div class="flex justify-between items-center mb-3">
            <h2 class="font-bold text-lg">用户评价</h2>
            <span class="text-purple-600 text-sm">全部 256 条 ></span>
        </div>
        
        <!-- 评价项 -->
        <div class="border-b pb-3 mb-3">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full">
                <div class="ml-2">